<template>
	<view>
		<SafeArea class="flex flex-col items-center justify-center">
			<view class="w-full">
				<view class="w-full h-full bg-[f7f8fa] pb-[120rpx]">
					<!-- 基本参数 -->
					<view>
						<view
							class="easy_between align-middle mt-3 mb-3 pl-4 pr-4"
						>
							<text class="h_m_gray">基本参数</text>
						</view>
						<view
							><view
								class="w-full h-[12vw] easy_between pl-4 pr-4"
								style="background-color: #fff"
							>
								<view style="width: 50vw">油脂名</view>
								<nut-input
									v-model="formData.name"
									placeholder="请输入"
									input-align="center"
									:border="false"
								/>
							</view>
						</view>
						<view
							><view
								class="w-full h-[12vw] easy_between pl-4 pr-4"
								style="background-color: #fff"
							>
								<view style="width: 50vw">皂化价</view>
								<nut-input
									v-model="formData.zhj"
									type="digit"
									placeholder="请输入"
									input-align="center"
									:border="false"
								/>
							</view>
						</view>
						<view
							><view
								class="w-full h-[12vw] easy_between pl-4 pr-4"
								style="background-color: #fff"
							>
								<view style="width: 50vw">INS</view>
								<nut-input
									v-model="formData.ins"
									type="digit"
									placeholder="请输入"
									input-align="center"
									:border="false"
								/>
							</view>
						</view>
					</view>
					<!-- 脂肪酸列表 -->
					<view>
						<view
							class="easy_between align-middle mt-3 mb-3 pl-4 pr-4"
						>
							<text class="h_m_gray">脂肪酸</text>
						</view>
						<view
							><view
								class="w-full h-[12vw] easy_between pl-4 pr-4"
								style="background-color: #fff"
								v-for="(item, index) in formData.list"
								:key="index"
							>
								<view style="width: 50vw">{{
									item.label
								}}</view>
								<nut-input
									v-model="item.value"
									type="digit"
									placeholder="请输入"
									input-align="center"
									:border="false"
								/>
							</view>
						</view>
					</view>
				</view>

				<!-- 按钮 -->
				<view
					style="
						position: fixed;
						left: 0;
						bottom: 0;
						right: 0;
						height: 130rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						background-color: #fff;
						padding: 3vw 4vw;
						z-index: 99;
					"
				>
					<view
						class="h-full w-[100%] easy_center bg-[#6066ea] text-[#fff] rounded-md"
						@tap="confirm"
						>确定</view
					>
				</view>
			</view>
		</SafeArea>
	</view>
</template>

<script lang="ts" setup>
import Taro, { eventCenter } from '@tarojs/taro';
import { ref, reactive } from 'vue';
import { SafeArea } from '@/components/SafeArea/index';

const initialFormData = {
	name: '阿甘油',
	alias: 'Argan Oil',
	zhj: 0.136,
	ins: 97,
	list: [
		{ label: '辛酸', key: 'xin', value: 0 },
		{ label: '癸酸', key: 'gui', value: 0 },
		{ label: '月桂酸', key: 'yuegui', value: 0 },
		{ label: '肉豆蔻酸', key: 'roudoukou', value: 0 },
		{ label: '棕榈酸', key: 'zonglv', value: 0 },
		{ label: '硬脂酸', key: 'yinzhi', value: 0 },
		{ label: '花生酸', key: 'huasheng', value: 0 },
		{ label: '棕榈烯酸', key: 'zonglvxi', value: 0 },
		{ label: '油酸', key: 'oil', value: 0 },
		{ label: '蓖麻油酸', key: 'bimayou', value: 0 },
		{ label: '花生烯', key: 'huashengxi', value: 0 },
		{ label: '芥酸', key: 'jie', value: 0 },
		{ label: '亚麻油酸', key: 'yamayou', value: 0 },
		{ label: '次亚麻油酸', key: 'ciyamayou', value: 0 },
		{ label: '甘三脂含量', key: 'gansanzhi', value: 0 },
	],
};
const formData = reactive(initialFormData);

const confirm = () => {
	console.log(formData, 'formData');
	eventCenter.trigger('editOilInfo', formData);
	Taro.navigateBack();
};
</script>
